<!-- 渠道结算 -->
<template>
  <div class="content">
    <dt-search ref="search" />

    <Tabs v-model="calculateNode" type="card" :animated="false" @on-click="onChangeTab">
      <TabPane label="可结算" name="1"></TabPane>
      <TabPane label="部分结算" name="2"></TabPane>
      <TabPane label="已结算" name="3"></TabPane>
    </Tabs>

    <dt-grid ref="table" page :onFetch="onFetch" />

    <!-- 结算记录 -->
    <count-log ref="countLog" :id="curItem" />
  </div>
</template>

<script>
  import countLog from './components/count-log.vue'
  import Column from './column.js'
  import searchOpt from '../opt/search.js'
  import countMgr from '@/biz/flowApproval/channelCount.js'

  export default {
    components: {
      countLog
    },
    data() {
      return {
        calculateNode: '1',
        curItem: null
      }
    },
    mounted() {
      this.$refs.search.init(this.$refs.table, searchOpt.options())
      this.$refs.table.init(this, new Column(this, this.calculateNode))
      this.$refs.table.fetch()
    },
    methods: {
      onFetch(data) {
        if (!this.onValidate(data)) {
          return Promise.reject()
        }
        return countMgr.list({
          ...data,
          calculateNode: this.calculateNode,
          companyId:
            data.companyId && data.companyId.length ? data.companyId[data.companyId.length - 1] : null
        })
      },
      onValidate(data) {
        // 校验订单编号
        if (data.orderCode && data.orderCode.length < 4) {
          this.$Message.warning('订单编号至少输入4位')
          return false
        }
        // 首访日期
        if (this.dateDiff(data.firstVisitStart, data.firstVisitEnd) >= 2) {
          this.$Message.warning('首访日期跨度至多两年')
          return false
        }
        // 认购日期
        if (this.dateDiff(data.subscriptionStart, data.subscriptionEnd) >= 2) {
          this.$Message.warning('认购日期跨度至多两年')
          return false
        }
        // 签约日期
        if (this.dateDiff(data.contractStart, data.contractEnd) >= 2) {
          this.$Message.warning('签约日期跨度至多两年')
          return false
        }
        // 审核日期
        if (this.dateDiff(data.calculateDateStart, data.calculateDateEnd) >= 2) {
          this.$Message.warning('结算日期跨度至多两年')
          return false
        }
        // 校验手机号
        if (data.customerPhone && data.customerPhone.length < 4) {
          this.$Message.warning('客户手机号至少输入4位')
          return false
        }
        return true
      },
      dateDiff(start, end) {
        if (start && end) {
          return this.$tool.dateDiff(start, end).Y
        } else {
          return 0
        }
      },
      // 刷新table
      onInit(row) {
        this.$refs.table.init(this, new Column(this, this.calculateNode))
      },
      // 保存结算
      saveCount(row) {
        return countMgr
          .update({
            calculateId: row.calculateId,
            channelCost: row.channelPrice,
            thisAmount: row.countPrice
          })
          .then((res) => {
            this.$Message.success('保存成功')
            this.$refs.table.fetch()
          })
      },
      onValidateInput(row) {
        let reg = /^\d+(\.\d{1,2}){0,1}$/
        if (!reg.test(row.channelPrice)) {
          this.$Message.error('渠道费用不可小于0，且保留两位小数')
          return false
        }
        if (!reg.test(row.countPrice)) {
          this.$Message.error('本次结算金额不可小于0，且保留两位小数')
          return false
        }
        if (Number(row.channelPrice) < Number(row.settledAmount)) {
          this.$Message.error('渠道费用不可小于已结算金额')
          return false
        }
        let num = Number(row.channelPrice) - Number(row.settledAmount)
        num = this.$tool.precision(num)
        if (row.countPrice > num) {
          this.$Message.error('本次结算金额不可大于剩余应付金额')
          return false
        }
        return true
      },
      // 结算记录
      onCountLog(data) {
        this.curItem = data.calculateId
        this.$refs.countLog.visible = true
      },
      // 切换tab
      onChangeTab() {
        this.$refs.table.clearFilter()
        this.$refs.table.init(this, new Column(this, this.calculateNode))
        this.$refs.table.fetch(true)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    padding: 20px;
  }
</style>
